<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>首页</title>
		<link rel="icon" href="img/favicon.ico" type="image/x-icon">
		<link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon" />

		<script src="js/mui.min.js"></script>
		<script src="libs/jquery-3.2.1.min.js"></script>
		<script src="libs/vue.js"></script>
		<script src="libs/layer-v3.1.1/layer/layer.js"></script>
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
		<link href="css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="css/common.css" />
		<link rel="stylesheet" type="text/css" href="css/index.css" />
		<script type="text/javascript" charset="utf-8">
			mui.init()
		</script>
	</head>

	<body class="bg_ff">
		<header class="mui-bar mui-bar-nav">
			<h1 class="mui-title">首页</h1>
		</header>
		<nav class="mui-bar mui-bar-tab bg_ff">
			<a class="mui-tab-item1 mui-active">
				<span class="mui-icon "><img src="img/homePage.png"/></span>
				<span class="mui-tab-label">首页</span>
			</a>
			<a class="mui-tab-item1" href="vip.html">
				<span class="mui-icon "><img src="img/huihomePage.png"/></span>
				<span class="mui-tab-label">会员中心</span>
			</a>
			<a class="mui-tab-item1" href="cart.html">
				<span class="mui-icon "><img src="img/huiShoppingCart.png"/></span>
				<span class="mui-tab-label">购物车</span>
			</a>
			<a class="mui-tab-item1" href="my.html">
				<span class="mui-icon "><img src="img/huiMycenter.png"/></span>
				<span class="mui-tab-label">我的</span>
			</a>
		</nav>
		<div class="mui-content bg_ff" id="Home" v-cloak>
			<div class="seach-top relative">
				<img class="absolute seach_icon" src="img/search.png" />
				<input type="text" name="" id="" value="" placeholder="搜索商品" />
			</div>
			<div id="slider" class="mui-slider">
				<div class="mui-slider-group mui-slider-loop">
					<!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
					<div class="mui-slider-item mui-slider-item-duplicate" v-for="(v,item) in banner" v-if="item === banner.length-1">
						<a :href="v.url">
							<img :src="v.cover">
						</a>
					</div>
					<!-- 第一张 -->
					<div class="mui-slider-item" v-for="(v,item) in banner">
						<a :href="v.url">
							<img :src="v.cover">
						</a>
					</div>

					<!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->

					<div class="mui-slider-item mui-slider-item-duplicate" v-for="(v,item) in banner" v-if="item === 0">
						<a :href="v.url">
							<img :src="v.cover">
						</a>
					</div>
				</div>
				<div class="mui-slider-indicator">
					<div v-for="(l,item) in banner" :key="item" :class="{'mui-indicator':item!=0 ,'mui-indicator mui-active':item==0}"></div>
				</div>
			</div>
			<div class="padding_lr12 mg_tb10">
				<span><img width="17" height="17" class="vertical-align_m mg_r5" src="img/ic_selected.png"/>7天无理由退换货</span>
				<span class="mg_left20 "><img width="17" height="17" class="vertical-align_m mg_r5" src="img/ic_selected.png"/>官方直营、正品保障</span>
			</div>
			<div class="mg_top20">
				<a :href="'activty.html?id='+ message.id"><img class="width100" :src="message.cover" /></a>
			</div>
			<div class="padding_lr12 mg_tb10">
				<p class="mui-ellipsis font_13 color_3">{{message.title}}</p>
			</div>
			<div class="padding_lr12 mg_top20 leftscroll-box">
				<div class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
					<div class="mui-scroll leftscroll">
						<a class="mui-control-item mui-active" v-for="(l,item) in Recommend.products1" :key="item" :class="{'mui-control-item':item!=0 ,'mui-control-item mui-active':item==0}">
							<dl>
								<dt><img :src="l.cover"/></dt>
								<dd class="text_left">
									<p class="mui-ellipsis font_13 color_3">{{l.name}}</p>
									<h6 class="red">￥{{l.price}}</h6>
								</dd>
							</dl>
						</a>

					</div>
				</div>
			</div>
			<div class="mg_top10">
					<a :href="'activty.html?id='+message1.id"><img class="width100" :src="message1.cover" /></a>

			</div>
			<div class="padding_lr12 mg_tb10">
				<p class="mui-ellipsis font_13 color_3">{{message1.title}}</p>
			</div>
			<div class="padding_lr12 mg_top20 leftscroll-box">
				<div class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
					<div class="mui-scroll leftscroll">
						<a class="mui-control-item mui-active" v-for="(l,item) in Recommend.products2" :key="item" :class="{'mui-control-item':item!=0 ,'mui-control-item mui-active':item==0}">
							<dl>
								<dt><img :src="l.cover"/></dt>
								<dd class="text_left">
									<p class="mui-ellipsis font_13 color_3">{{l.name}}</p>
									<h6 class="red">￥{{l.price}}</h6>
								</dd>
							</dl>
						</a>
					</div>
				</div>
			</div>
			<div class="bor_b">
				<div class="relative list-box">
					<div class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted" id="list">
						<div class="mui-scroll bor_b">
							<a v-for="(v,item) in classify" :key="item" :class="{'mui-control-item':item!=0 ,'mui-control-item mui-active':item==0}" :data-tag="v.id" @click="changeClass(v.id)">
								{{v.name}}
							</a>
						</div>

					</div>
					<a href="classification.html" class="absolute icon_fl"><img src="img/ic_fenl.png" /></a>
				</div>
			</div>
			<div class="good_list_box padding_lr12 mg_b20">
				<dl class="clearfix  bor_b" v-for="(l,item) in list" :key="item">
					<dt class="left"><a href="javascript:void(0);"><img :src="l.cover"/></a></dt>
					<dd class="left">
						<p class="mui-ellipsis-2 font_13 color_3">{{l.name}}</p>
						<span class="sale_icon mg_top5">{{l.describe}}</span>
						<h4 class="font_16  mg_top10 clearfix">
							<strong class="left red">￥{{l.price}}</strong>
							<a class="right" href="javascript:void(0);"><img width="19" src="img/icon_spxq.png"/></a>
							
						</h4>
					</dd>
				</dl>

			</div>
		</div>
	</body>
	<script src="js/jquery-1.7.1.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/common.js" type="text/javascript" charset="utf-8"></script>

	<script type="text/javascript">
		$(function(){
			$(".seach-top input").focus(function(){
				window.location.href='search.html'
			})
		})



        new Vue({
            el:"#Home",
            data:{
                banner:[],
                Recommend:[],
				imgUrl:imgurl,
				message:'',
				message1:'',
				classify:[],
				list:[],
				current_id:''
            },
            mounted(){

                this.$options.methods.getList(this)



            },
            updated: function() {
                var vm = this;

                //获得slider插件对象
                var gallery = mui('.mui-slider');
                gallery.slider({
                    interval: 3000, //自动轮播周期，若为0则不自动播放，默认为0；
                });
            },
            methods:{
                getGoods:function (page,obj) {
					var data_g = {};
					data_g.page = page;
					data_g.id = obj.current_id;
                    axios.get(sysurl + "products?page="+page+"&id="+obj.current_id, data)
                        .then(res => {
                            if (res.data.code === 200) {
//                                obj.list = res.data.value.data;
                                for(var i = 0;i<res.data.value.total;i++){
                                    obj.list.push(res.data.value.data[i]);
								}
                            }
                            else {

                            }
                        }, err => {

                        })
                        .catch((error) => {

                        })
                },
                changeClass:function (id) {
					this.current_id = id;
					this.list = [];
                    this.$options.methods.getGoods(1,this)
                },
                getList:function (obj) {
                    var _this = obj;
//                    data.page = 1
                    axios.get(sysurl + "banners", data)
                        .then(res => {
                            if (res.data.code === 200) {
                                _this.banner = res.data.value;
                            }
                            else {

                            }
                        }, err => {

                        })
                        .catch((error) => {

                        })
                    axios.get(sysurl + "recommend_products", data)
                        .then(res => {
                            if (res.data.code === 200) {
                                _this.Recommend = res.data.value;
                                _this.message = res.data.value.messages[0];
                                _this.message1 = res.data.value.messages[1];

                            }
                            else {

                            }
                        }, err => {

                        })
                        .catch((error) => {

                        })
                    axios.get(sysurl + "category", data)
                        .then(res => {
                            if (res.data.code === 200) {
                                _this.classify = res.data.value;
                                _this.current_id = res.data.value[0].id;
                                _this.$options.methods.getGoods(1,_this)

                            }
                            else {

                            }
                        }, err => {

                        })
                        .catch((error) => {

                        })
                },

            }
        })



	</script>

</html>